<template>
  <div>
    <!-- Title -->
    <div>
      <TitleCompound :title="title"></TitleCompound>
    </div>
    <!-- content -->
    <div>
      <!-- 基础描述 -->
      <div>
        <p>
          ref 是响应式的基础，请查看
          <a
            href="https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive-variables-with-ref"
            >响应式基础</a
          >
          ；其在<b>script</b>中使用需要<b>.value</b>，可以在插件中开启<b>Dot Value</b
          >，就可以自动检测和添加<b>.value</b>
        </p>
        <p>可以应用在：</p>
        <ul>
          <li>基本类型</li>
          <li>对象类型</li>
          <li>数组类型</li>
          <li>属性</li>
        </ul>
      </div>
      <!-- 基础类型 -->
      <div>
        <h3>基础类型</h3>
        <p>使用ref响应式显示 sum的值;</p>

        <h2>{{ sum }}</h2>
        <el-button @click="sum++" type="primary">sum++</el-button>

        <el-button @click="add" type="success">Add function</el-button>
      </div>

      <!-- 对象类型 -->
      <div>
        <h3>对象类型</h3>
        <p>
          <el-icon v-if="person.gender === 'male'">
            <IconMale></IconMale>
          </el-icon>
          <el-icon v-else>
            <IconFemale></IconFemale>
          </el-icon>
          <span>{{ person.name }} - {{ person.age }}</span>
        </p>
        <el-button @click="changePersonAge" type="primary">Change Person Age</el-button>
        <el-button @click="changePersonGender" type="success">Change Person Gender</el-button>
        <el-table :data="Array(person)" stripe style="width: 80%">
          <el-table-column prop="name" label="Name" />
          <el-table-column prop="age" label="Age" />
          <el-table-column prop="gender" label="Gender" width="180" />
        </el-table>
        <p>
          修改名称：<el-input
            v-model="person.name"
            style="width: 240px"
            placeholder="Please input"
          />
        </p>
      </div>

      <!-- 数组类型 -->
      <div>
        <h3>数组类型</h3>
        <p>团队成绩列表</p>
        <el-button @click="addScore" type="primary">Add Score</el-button>
        <el-button @click="sortScores" type="success">Sort Scores</el-button>
        <div v-for="(score, index) in teamScores" :key="index">
          <span>第{{ index + 1 }}个成绩：{{ score }}</span>
        </div>

        <h3>对象数组类型</h3>
        <p>团队成员列表</p>
        <el-button @click="sortPersonAge" type="primary">Sort Person Age</el-button>
        <el-table :data="personList" stripe style="width: 80%">
          <el-table-column prop="name" label="Name" />
          <el-table-column prop="age" label="Age" />
          <el-table-column prop="gender" label="Gender" width="180" />
        </el-table>
      </div>

      <!-- 属性 -->
      <div>
        <h3>属性</h3>
        <p ref="colorRed">ref="colorRed"</p>
        <el-button @click="showTheElement">show the element</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import IconMale from '@/components/icons/IconMale.vue'
import IconFemale from '@/components/icons/IconFemale.vue'
import TitleCompound from '@/components/TitleCompound.vue'
import type { Person } from '@/types'
import { ref } from 'vue'
import { ElMessage, ElMessageBox, type Action } from 'element-plus'

const title = 'Ref Quickstart'

// 基础类型
const sum = ref(0)

function add() {
  sum.value += 1
}

// 对象
const person = ref<Person>({
  name: 'John',
  age: 30,
  gender: 'male',
})

function changePersonAge() {
  person.value.age += 1
}

function changePersonGender() {
  person.value.gender = person.value.gender === 'female' ? 'male' : 'female'
}

// 数组
const teamScores = ref<number[]>([98, 91, 100, 89, 86, 99])

function addScore() {
  teamScores.value.push(Math.floor(Math.random() * 100))
}
function sortScores() {
  teamScores.value.sort((a, b) => b - a)
}

// 对象数组
const personList = ref<Person[]>([
  {
    name: 'John',
    age: 30,
    gender: 'male',
  },
  {
    name: 'Jane',
    age: 25,
    gender: 'female',
  },
  {
    name: 'Jack',
    age: 35,
    gender: 'male',
  },
])

function sortPersonAge() {
  personList.value.sort((a, b) => b.age - a.age)
}

// 属性
const colorRed = ref()
// const colorRed = ref<HTMLElement>()
console.log(colorRed)
function showTheElement() {
  console.log(colorRed.value)

  ElMessageBox.alert(colorRed.value, 'The Element Value', {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: 'OK',
    callback: (action: Action) => {
      ElMessage({
        type: 'info',
        message: `action: ${action}`,
      })
    },
  })
}
</script>

<style scoped></style>
